<template>
  <div>
    <a-dropdown :getPopupContainer="getPopupContainer" v-if="enableMenuList.length > 10" :placement="placement">
      <a class="ant-dropdown-link tbRowEllipsis" @click="(e) => e.preventDefault()"> ... </a>
      <a-menu slot="overlay" @click="clickAction">
        <a-menu-item v-for="item in enableMenuList" :key="item.key">
          <a href="javascript:;" >
            <i v-if="item.icon" class="iconfont" :class="item.icon"></i>
            {{ item.title }}
          </a>
        </a-menu-item> 
      </a-menu>
    </a-dropdown>
    <template v-else>
      <a-button :ghost="true" :type="$t(item.title).includes('删除') ? 'danger' : 'primary'" size="small" @click="clickAction({key:item.key})" v-for="(item,i) in enableMenuList" :key="item.key" style="margin-right:8px;margin-bottom: 8px">{{ item.title }}</a-button>
    </template>
  </div>
</template>
<script>
import AuthText from '@/components/AuthText'
export default {
  components: {
    AuthText
  },
  props: {
    // 下拉菜单列表
    menus: {
      type: Array,
      default () {
        return []
      }
    },
    placement: {
      type: String,
      default: 'bottomLeft'
    }
  },
  computed: {
    enableMenuList () {
      return this.menus.filter(item => {
        if (!item.auth) {
          return true
        }
        let { auth } = item
        if (typeof auth === 'string') {
          auth = [item.auth]
        }
        return this.$hasPermission(auth)
      })
    }
  },
  methods: {
    getPopupContainer () {
      return document.body
    },
    clickAction ({ key }) {
      this.$emit('clickaction', key)
    }
  }
}
</script>
<style scoped lang="less">
.tbRowEllipsis {
  display: inline-block;
  width: 30px;
  height: 30px;
  text-align: center;
  font-weight: bold;
  &:hover {
    /*background-color: rgb(242, 242, 242);*/
    /*color: #000;*/
  }
}
</style>
